<template lang="pug">
.content
  .container-fluid
    .row
      .col-lg-3.col-md-6.col-sm-6.traffic
        md-stats-widget(icon='content_copy', backgroundColor='blue', title='今日客流')
          div(slot='content')
            | {{userCount}}
            small 人
          div(slot='footer')
            i.material-icons date_range
            router-link(to='Dashboard') 今天 24 小时内
      .col-lg-9.col-md-6.col-sm-6
        md-chart-widget(type='Line', 
                        backgroundColor='blue', 
                        title='客流趋势', 
                        id='trafficChart',
                        :options='trafficChart.options',
                        :data='trafficChart.data')
          div(slot='subTitle')
            span.text-success
              i.fa.fa-long-arrow-up
              |  55%
            |  increase in today sales.
          div(slot='footer')
            i.material-icons access_time
            |  updated 4 minutes ago
    .row
      .col-md-4
        md-chart-widget(type='Line', 
                        backgroundColor='green', 
                        title='室内温度', 
                        id='dailySalesChart',
                        :options='dailySalesChart.options',
                        :data='dailySalesChart.data')
          div(slot='subTitle')
            span.text-success
              i.fa.fa-long-arrow-up
              |  55%
            |  increase in today sales.
          div(slot='footer')
            i.material-icons access_time
            |  updated 4 minutes ago
      .col-md-4
        md-chart-widget(type='Bar', 
                        backgroundColor='orange', 
                        title='室内 PM2.5', 
                        id='emailsSubscriptionChart',
                        :options='emailsSubscriptionChart.options',
                        :data='emailsSubscriptionChart.data')
          div(slot='subTitle')
            | Last Campaign Performance
          div(slot='footer')
            i.material-icons access_time
            |  campaign sent 2 days ago
      .col-md-4
        md-chart-widget(type='Line', 
                        backgroundColor='red', 
                        title='室内湿度', 
                        id='completedTasksChart',
                        :options='completedTasksChart.options',
                        :data='completedTasksChart.data')
          div(slot='subTitle')
            | Last Campaign Performance
          div(slot='footer')
            i.material-icons access_time
            |  campaign sent 2 days ago
</template>

<script>
import axios from 'axios'
import MdNavTabs from '@/core/components/mdTab/nav-tabs'
import MdTabContent from '@/core/components/mdTab/tab-content'

export default {
  name: 'dashboard',
  components: {
    MdTabContent,
    MdNavTabs
  },

  created() {
    axios.get(process.env.API_URL + '/macs/count/today')
    .then(res => {
      this.userCount = res.data
    })
  },

  data() {
    const lineSmooth = this.$Chartist.Interpolation.cardinal({ tension: 0 })
    return {
      userCount: 0,
      trafficChart: {
        data: {
          labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
          series: [
            [230, 750, 450, 300, 280, 240, 200, 190]
          ]
        },
        options: {
          lineSmooth: lineSmooth,
          low: 0,
          high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
          chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }
        }
      },
      dailySalesChart: {
        data: {
          labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
          series: [
            [12, 17, 7, 17, 23, 18, 38]
          ]
        },
        options: {
          lineSmooth: lineSmooth,
          low: 0,
          high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
          chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }
        }
      },
      emailsSubscriptionChart: {
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          series: [
            [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]

          ]
        },
        options: {
          axisX: {
            showGrid: false
          },
          low: 0,
          high: 1000,
          chartPadding: { top: 0, right: 5, bottom: 0, left: 0 }
        }
      },
      completedTasksChart: {
        data: {
          labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
          series: [
            [230, 750, 450, 300, 280, 240, 200, 190]
          ]
        },
        options: {
          lineSmooth: lineSmooth,
          low: 0,
          high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
          chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }
        }
      }
    }
  }
}
</script>

<style lang="scss">
.traffic .title {
  margin: 40px 0 32px;
  font-size: 70px;
}
</style>
